"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/10/31
 */
import * as React from 'react'

const {View, FlatList, TouchableOpacity} = require('react-native');
const {WhiteSpace} = require('antd-mobile');
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";

const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;

const {Actions} = require('react-native-router-flux');
import SearchBar from "../../component/SearchBar";
import NavBackButton from "../../component/BackButton";
import {searchResultData} from "../../assets/data";
import SearchResultItem from "./SearchResultItem";

import MySegmentControl from "../../component/MySegmentControl.ios";
import MyText from "../../component/MyText";
import {searchStyles} from "../../assets/styles/search";
import {SearchPage} from "../../interface/router";
import Request from "../../utils/Request";

class Page extends React.Component<SearchPage, any> {


    constructor(props: SearchPage, context: any,) {
        super(props, context);
        this.state = {
            dataSource: [],
            selectedIndex: 0,
        }
    }

    onSearch = (e) => {
        if (e.nativeEvent.text) {
            this.props.dispatch({
                type: 'search/fetchData',
                payload: {word: e.nativeEvent.text}
            })
        }
    };


    onChange = (index: number) => {
        this.setState({selectedIndex: index});

    };

    onItemPress = (data, type) => {
        switch (type) {
            case 0: {
                Actions.userProfile({userInfo: data});
            }
                break;
            case 1:
                break;
            case 2:
                break;
            case 3: {
                Actions.groupDetail({title: data.groupName, groupItem: data})
            }
                break;

        }
    };

    getDataSource = () => {
        switch (this.state.selectedIndex) {
            case 0:
                return this.props.search.member;
            case 1:
                return this.props.search.companies;

            case 2:
                return this.props.search.activities;
            // this.setState({dataSource: this.props.search.activities});
            // break;
            case 3:
                return this.props.search.groups;
            // this.setState({dataSource: this.props.search.groups});
            // break;
        }
    };
    renderHeader = () => {
        return (
            <View>
                <View style={{padding: 15}}>
                    <MySegmentControl values={["会员", "公司", "活动", "群组"]}
                                      height={autoSize(29)}
                                      onChange={this.onChange}
                                      selectedIndex={0}/>
                </View>
                {/*<View style={searchStyles.headerInfo}>*/}
                {/*<MyText style={searchStyles.headerInfoText}>‘4,652 名会员’的 g</MyText>*/}
                {/*<TouchableOpacity>*/}
                {/*<MyText style={searchStyles.headerInfoText}>查看全部</MyText>*/}
                {/*</TouchableOpacity>*/}
                {/*</View>*/}
            </View>
        )
    };

    renderItem = ({item, index}) => {
        switch (this.state.selectedIndex) {
            case 0: {
                const member: userItem = item;
                return <SearchResultItem avatar={{uri: Request.checkImageUrl(member.avatar) + ''}}
                                         name={member.nickName}
                                         sub={`${member.duty ? member.duty : ''} at ${member.company.name}`}
                                         detail={member.company.address}
                                         onPress={this.onItemPress.bind(this, member, 0)}
                />
            }

            case 1: {
                const com: companyItem = item;
                return <SearchResultItem avatar={{uri: com.pic}}
                                         name={com.name}
                                         sub={com.business}
                                         detail={com.address}
                                         onPress={this.onItemPress.bind(this, com, 1)}
                />
            }


            case 2: {
                const com: groupItem = item;
                return <SearchResultItem avatar={{uri: com.mainPic}}
                                         name={com.groupName}
                                         sub={com.description}
                                         detail={''}
                                         onPress={this.onItemPress.bind(this, com, 2)}
                />
            }
            case 3: {
                const group: groupItem = item;
                return <SearchResultItem avatar={{uri: group.mainPic}}
                                         name={group.groupName}
                                         sub={group.description}
                                         detail={''}
                                         onPress={this.onItemPress.bind(this, group, 3)}
                />
            }
        }
        return null;

    };

    render() {
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton icon={{name: 'icon-cha1', color: '#999999', size: 20}}/>}
                               title={<SearchBar placeholder="探索会员圈" leftButtonWidth={50} rightButtonWidth={0}
                                                 onSubmitEditing={this.onSearch}/>}
                />
                <FlatList data={this.getDataSource()}
                          renderItem={this.renderItem}
                          ListHeaderComponent={this.renderHeader}
                          keyboardDismissMode='on-drag'
                          keyExtractor={(item, index) => item.id}
                          extraData={this.state}
                          ItemSeparatorComponent={() => <WhiteSpace/>}

                />
            </View>
        );
    }
}


export default connect(
    ({auth, search, active}) => ({auth, search, active})
)(Page);